<template>
    <div class="mt_20">
        <div class="table_box">
            <el-table :data="tableData" class="com_table" ref="straRef" height="700px">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <el-table-column prop="name" label="项目名称">
                </el-table-column>
                <el-table-column prop="user_one" label="一阶执勤优化师">
                    <template slot-scope="scope">
                        {{scope.row.user_one.length>0?scope.row.user_one.join(","):"--"}}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="二阶执勤优化师">
                    <template slot-scope="scope">
                        {{scope.row.user_two.length>0?scope.row.user_two.join(","):"--"}}
                    </template>
                </el-table-column>
                <el-table-column prop="advertiser_one" label="一阶关联账户">
                    <template slot-scope="scope">
                        <div class="table_num">{{scope.row.advertiser_one}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="advertiser_two" label="二阶关联账户">
                    <template slot-scope="scope">
                        <div class="table_num">{{scope.row.advertiser_two}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="开启状态" align="center">
                    <template slot-scope="scope">
                        <el-switch :value="scope.row.status" :active-value="0" :inactive-value="1" @change="switchStatus(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="clean_status" label="自动清除" align="center">
                    <template slot-scope="scope">
                        <el-switch :value="scope.row.clean_status" :active-value="1" :inactive-value="0" @change="switchClearStatus(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="segmentation_cost" label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button type="text" style="padding:0" @click="toMaterial(scope.row)">素材详情</el-button>
                        <el-button type="text" style="padding:0" @click="editProject(scope.row,'edit')">编辑</el-button>
                        <el-dropdown style="margin-left:5px">
                            <el-button type="text" style="padding:0" icon="el-icon-more" class="role_icon"></el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="viewModel(scope.row)">
                                    <div class="flexbox flexcenter">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M11 17.9823L4.78571 17.9824C4.35178 17.9824 4 17.6029 4 17.1348L4 3.84728C4 3.37914 4.35178 2.99965 4.78572 2.99965L15.2143 2.99966C15.6482 2.99966 16 3.37914 16 3.84728L16 10.9998" stroke="#616C85" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M7 7H13" stroke="#616C85" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M7 10H10.5" stroke="#616C85" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M12 14.5L14 13L16 14.5" stroke="#616C85" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M14 18L14 13" stroke="#616C85" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                        <span class="font_14 color_01" style="margin-left:5px">计划模板</span>
                                    </div>
                                </el-dropdown-item>
                                <el-dropdown-item @click.native="editProject(scope.row,'copy')">
                                    <div class="flexbox flexcenter">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M5.49995 3.2002C5.05812 3.2002 4.69995 3.55837 4.69995 4.0002V6.2002H2.99995C2.55812 6.2002 2.19995 6.55837 2.19995 7.0002V17.0002C2.19995 17.442 2.55812 17.8002 2.99995 17.8002H13C13.4418 17.8002 13.8 17.442 13.8 17.0002V15.3002H16C16.4418 15.3002 16.8 14.942 16.8 14.5002V4.0002C16.8 3.55837 16.4418 3.2002 16 3.2002H5.49995ZM13.8 13.7002H15.2V4.8002H6.29995V6.2002H13C13.4418 6.2002 13.8 6.55837 13.8 7.0002V13.7002ZM5.49995 7.8002H3.79995V16.2002H12.2V14.5002V7.8002H5.49995Z" fill="#616C85" />
                                            <rect x="5" y="10" width="6" height="1.6" rx="0.2" fill="#616C85" />
                                            <path d="M5 13.2C5 13.0895 5.08954 13 5.2 13L8.8 13C8.91046 13 9 13.0895 9 13.2V14.4C9 14.5105 8.91046 14.6 8.8 14.6H5.2C5.08954 14.6 5 14.5105 5 14.4V13.2Z" fill="#616C85" />
                                        </svg>
                                        <span class="font_14 color_01" style="margin-left:5px">复制项目</span>
                                    </div>
                                </el-dropdown-item>
                                <el-dropdown-item @click.native="clearPlan(scope.row)">
                                    <div class="flexbox flexcenter">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M6.53943 5.25292L7.01136 2.5H13.1464L13.6184 5.25292" stroke="#616C85" stroke-width="1.6" stroke-linejoin="round" />
                                            <path d="M3 5.5H17.1579" stroke="#616C85" stroke-width="1.6" stroke-linecap="round" />
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M15.1915 5.5L14.4049 17.5001H5.75286L4.96631 5.5H15.1915Z" stroke="#616C85" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M8.11255 14.5H12.0453" stroke="#616C85" stroke-width="1.6" stroke-linecap="round" />
                                        </svg>
                                        <span class="font_14 color_01" style="margin-left:5px">清除计划</span>
                                    </div>
                                </el-dropdown-item>
                                <el-dropdown-item @click.native="deleteTask(scope.row.id)">
                                    <div class="flexbox flexcenter">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M6.53943 5.25292L7.01136 2.5H13.1464L13.6184 5.25292" stroke="#616C85" stroke-width="1.6" stroke-linejoin="round" />
                                            <path d="M3 5.5H17.1579" stroke="#616C85" stroke-width="1.6" stroke-linecap="round" />
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M15.1915 5.5L14.4049 17.5001H5.75286L4.96631 5.5H15.1915Z" stroke="#616C85" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M8.11255 14.5H12.0453" stroke="#616C85" stroke-width="1.6" stroke-linecap="round" />
                                        </svg>
                                        <span class="font_14 color_01" style="margin-left:5px">删除项目</span>
                                    </div>
                                </el-dropdown-item>
                                <el-dropdown-item @click.native="planLog(scope.row)">
                                    <div class="flexbox flexcenter">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M13.5 4H16.3C16.4857 4 16.6637 4.07902 16.795 4.21967C16.9263 4.36032 17 4.55109 17 4.75V16.75C17 16.9489 16.9263 17.1397 16.795 17.2803C16.6637 17.421 16.4857 17.5 16.3 17.5H3.7C3.51435 17.5 3.3363 17.421 3.20503 17.2803C3.07375 17.1397 3 16.9489 3 16.75V4.75C3 4.55109 3.07375 4.36032 3.20503 4.21967C3.3363 4.07902 3.51435 4 3.7 4H6.5V2.5H7.9V4H12.1V2.5H13.5V4ZM15.6 10H4.4V16H15.6V10ZM12.1 5.5H7.9V7H6.5V5.5H4.4V8.5H15.6V5.5H13.5V7H12.1V5.5ZM5.8 11.5H7.2V13H5.8V11.5ZM9.3 11.5H10.7V13H9.3V11.5ZM12.8 11.5H14.2V13H12.8V11.5Z" fill="#616C85" />
                                        </svg>
                                        <span class="font_14 color_01" style="margin-left:5px">清除计划日志</span>
                                    </div>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page_box flexbox flexcenter">
            <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    props: ["queryInfo", "total", "tableData"],
    name: "",
    data() {
        return {};
    },
    created() {},
    methods: {
        editProject(row, type) {
            this.$router.push({
                path: "/video/editproject",
                query: {
                    id: row.id,
                    type: type,
                },
            });
        },

        viewModel(row) {
            this.$emit("viewModel", row);
        },

        clearPlan(row){
            this.$emit("clearPlan", row);
        },

        planLog(row){
            this.$emit("planLog", row);
        },

        switchStatus(row) {
            let text = row.status == 0 ? "关闭" : "开启";
            this.$confirm(`请问是否${text}项目`, `${text}项目`, {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    let type = row.status == 0 ? 1 : 0;
                    const { data: res } = await this.$http.post(
                        "videotest/Probject/staPro",
                        {
                            id: row.id,
                            status: type,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "操作成功",
                        });
                        this.$emit("getDataList", this.queryInfo.page);
                    }
                })
                .catch(() => {});
        },

        switchClearStatus(row) {
            let text = row.clean_status == 1 ? "关闭" : "开启";
            this.$confirm(`请问是否${text}自动清除`, `${text}自动清除`, {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    let type = row.clean_status == 1 ? 0 : 1;
                    const { data: res } = await this.$http.post(
                        "videotest/Probject/cleanStatus",
                        {
                            id: row.id,
                            clean_status: type,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "操作成功",
                        });
                        this.$emit("getDataList", this.queryInfo.page);
                    }
                })
                .catch(() => {});
        },

        // 删除
        deleteTask(id) {
            this.$confirm("是否要删除该项目?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "/videotest/Probject/delPro",
                        {
                            id: id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                        this.$emit("getDataList", 1);
                    }
                })
                .catch(() => {});
        },

        // 素材列表
        toMaterial(row) {
            let routeUrl = this.$router.resolve({
                path: "/video/materiallist",
                query: {
                    id: row.id,
                    name: row.name,
                    one: JSON.stringify(row.user_one),
                    two: JSON.stringify(row.user_two),
                },
            });
            window.open(routeUrl.href, "_blank");
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.$emit("getDataList", 1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.$emit("getDataList", val);
        },
    },
    components: {
        
    },
};
</script>


<style scoped>
.table_box {
    padding-top: 0;
}
</style>



